<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import dayjs, { Dayjs } from 'dayjs';
  import Space from '@sscd/space';
  import TimePicker from '@sscd/time-picker';
  const value = ref<Dayjs>(dayjs('08:00:00', 'HH:mm:ss'));
  const strValue = ref<string>('09:00:00');
  watch(
    () => value,
    () => console.log(value.value)
  );
  watch(
    () => strValue,
    () => console.log(strValue.value)
  );
</script>

<template>
  <div class="demo">
    <div class="demo-title">基本</div>
    <div class="demo-content">
      <Space direction="vertical">
        <TimePicker v-model:value="value" />
        <TimePicker v-model:value="strValue" value-format="HH:mm:ss" />
      </Space>
    </div>
  </div>
</template>
